<template>
  <div class="select-none">
    <img :src="bg" class="wave" />
    <div class="flex-center absolute right-5 top-3">
      <!-- 国际化 -->
      <el-dropdown trigger="click">
        <globalization
          class="hover:text-primary hover:!bg-[transparent] w-[20px] h-[20px] ml-1.5 cursor-pointer outline-none duration-300 text-white"
        />
        <template #dropdown>
          <el-dropdown-menu class="translation">
            <el-dropdown-item
              :style="getDropdownItemStyle(locale, 'zh')"
              :class="['dark:!text-white', getDropdownItemClass(locale, 'zh')]"
              @click="translationZh"
            >
              <IconifyIconOffline class="check-zh" v-show="locale === 'zh'" :icon="Check" />
              简体中文
            </el-dropdown-item>
            <el-dropdown-item
              :style="getDropdownItemStyle(locale, 'en')"
              :class="['dark:!text-white', getDropdownItemClass(locale, 'en')]"
              @click="translationEn"
            >
              <IconifyIconOffline class="check-zh" v-show="locale === 'en'" :icon="Check" />
              English
            </el-dropdown-item>
          </el-dropdown-menu>
        </template>
      </el-dropdown>
    </div>
    <div class="login-container">
      <div style="color: transparent">占位符</div>
      <div class="login-box">
        <div class="login-form">
          <el-form ref="ruleFormRef" :model="ruleForm" size="large">
            <div class="flex-center">
              <img :src="users" />
            </div>
            <el-form-item
              prop="username"
              :rules="[
                {
                  required: true,
                  message: transformI18n($t('login.usernameReg')),
                  trigger: 'blur',
                },
              ]"
            >
              <el-input
                clearable
                v-model="ruleForm.username"
                :placeholder="t('login.username')"
                :prefix-icon="useRenderIcon(User)"
              />
            </el-form-item>
            <el-form-item prop="password">
              <el-input
                clearable
                show-password
                v-model="ruleForm.password"
                :placeholder="t('login.password')"
                :prefix-icon="useRenderIcon(Lock)"
              />
            </el-form-item>
            <el-form-item>
              <div class="w-full h-[20px] flex justify-between items-center">
                <el-checkbox v-model="checked">
                  {{ t('login.remember') }}
                </el-checkbox>
                <el-button link type="primary" @click="useUserStoreHook().SET_CURRENTPAGE(4)">
                  {{ t('login.forget') }}
                </el-button>
              </div>
              <el-button
                class="w-full mt-4"
                size="default"
                type="primary"
                :loading="loading"
                @click="onLogin(ruleFormRef)"
              >
                {{ t('login.login') }}
              </el-button>
            </el-form-item>
          </el-form>
        </div>
      </div>
    </div>
    <!--底部  -->
    <div class="footer">
      <span class="footer-company">
        Copyright © 2021
        <a href="http://www.risun.com" target="_blank">
          {{ transformI18n($t('globals.company')) }}
        </a>
      </span>
    </div>
  </div>
</template>
<script setup lang="ts">
  import type { FormInstance } from 'element-plus'
  import CryptoJS from 'crypto-js'
  import globalization from '@/assets/svg/globalization.svg?component'
  import { useRenderIcon } from '@/components/ReIcon/src/hooks'
  import { bg, users, Check, Lock, User } from './utils/static'
  import { $t, transformI18n } from '@/i18n'
  import { useUserStoreHook } from '@/store/modules/user'
  import { useNav } from '@/layout/hooks/useNav'
  import { useTranslationLang } from '@/layout/hooks/useTranslationLang'
  const { t } = useI18n()
  const { getDropdownItemStyle, getDropdownItemClass } = useNav()
  const { locale, translationZh, translationEn } = useTranslationLang()
  const ruleFormRef = ref<FormInstance>()
  const ruleForm = reactive({
    username: '',
    password: '',
  })
  const loading = ref(false)
  const checked = ref(false)
  // eslint-disable-next-line @typescript-eslint/no-unused-vars
  const onLogin = async (formEl: FormInstance | undefined) => {
    loading.value = true
    if (!formEl) return
    await formEl.validate((valid, fields) => {
      if (valid) {
        useUserStoreHook()
          .login({ username: ruleForm.username, password: encryptByDES(ruleForm.password) })
          .then((res) => {
            if (res.code === 200) {
            }
          })
          .finally(() => {
            loading.value = false
          })
      } else {
        loading.value = false
        return fields
      }
    })
  }
  /** 使用DES数据加密  */
  function encryptByDES(message) {
    const keyHex = CryptoJS.enc.Utf8.parse('cf410f8f9a4a42cc7a7f48fc4134e8f9')
    const encrypted = CryptoJS.TripleDES.encrypt(message, keyHex, {
      mode: CryptoJS.mode.ECB,
      padding: CryptoJS.pad.Pkcs7,
    })
    return encrypted.toString()
  }
  /** 使用公共函数，避免`removeEventListener`失效 */
  function onkeypress({ code }: KeyboardEvent) {
    if (code === 'Enter') {
      onLogin(ruleFormRef.value)
    }
  }
  onMounted(() => {
    window.document.addEventListener('keypress', onkeypress)
  })
  onBeforeUnmount(() => {
    window.document.removeEventListener('keypress', onkeypress)
  })
</script>

<style scoped>
  @import url('@/styles/login.css');
</style>
<style lang="scss" scoped>
  .translation {
    ::v-deep(.el-dropdown-menu__item) {
      padding: 5px 40px;
    }

    .check-zh {
      position: absolute;
      left: 20px;
    }

    .check-en {
      position: absolute;
      left: 20px;
    }
  }
  .login-form {
    ::v-deep(.el-input__wrapper) {
      background-color: rgba(39, 176, 255, 0.2);
      border: 1px solid rgba(108, 205, 255, 0.5);
      box-shadow: none;
      border-radius: 1px;
    }
    ::v-deep(.is-error .el-input__wrapper) {
      border: 1px solid var(--el-color-danger);
    }
    ::v-deep(.el-input__prefix-inner) {
      color: rgb(14 190 243);
    }
    ::v-deep(.el-input__suffix-inner) {
      .el-icon {
        color: #ffffff;
      }
    }
    ::v-deep(.el-input__inner) {
      color: #ffffff;
    }
    .flex-center {
      margin: 10px auto 22px;
    }
  }
</style>
